<template>
  <div class="account-list">
    <div class="header-row">
      <el-row>
        <el-col
          :span="6"
          style="margin-bottom: 10px"
        >
          <span>姓名：</span>
          <el-input
            v-model="searchForm.name"
            placeholder="请输入人员姓名"
            style="width: calc(100% - 56px)"
          />
        </el-col>
        <el-col
          :span="6"
          style="margin-bottom: 10px"
        >
          <span>手机号：</span>
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号码"
            style="width: calc(100% - 72px)"
          />
        </el-col>
        <el-col
          :span="8"
          style="margin-bottom: 10px"
        >
          <span>加入时间：</span>
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col
          :span="4"
          style="margin-bottom: 10px"
        >
          <span>状态：</span>
          <el-select
            v-model="searchForm.status"
            style="width: calc(100% - 56px)"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-col>
        <el-col
          :span="24"
          style="text-align: right"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            style="margin-right: 10px"
            @click="handleSearch"
          >搜索</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleCreate"
          >添加人员</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="handleReset"
          >重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="list-row">
      <el-table
        :data="listData"
        v-loading="loading"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="name"
          label="用户姓名"
        />
        <el-table-column
          prop="phone"
          label="手机号码"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="applyPersonal"
          label="审批人"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.enabled ? '' : 'danger'">
              {{ scope.row.enabled ? "已启用" : "已禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.enabled"
              type="warning "
              size="text"
              @click="handleDisabled(scope.row)"
            >禁用</el-button>
            <el-button
              v-else
              type="warning "
              size="text"
              @click="handleEnabled(scope.row)"
            >启用</el-button>
            <el-popconfirm
              title="删除后恢复，确定删除吗？"
              style="margin-left: 10px"
              @onConfirm="handleConfirmDelete(scope.row)"
            >
              <el-button
                slot="reference"
                type="danger"
                size="text"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <CreateDialog
      :title="title"
      :visible="visible"
      @close="handleCloseCreate"
      @confirm="handleConfirmCreate"
    />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import CreateDialog from './components/create'
import {
  queryRecycleList,
  deleteRecycle,
  enabledAccount,
  disableedAccount
} from '@/api'

export default {
  components: {
    CreateDialog
  },
  data() {
    return {
      searchForm: {
        date: [undefined, undefined],
        phone: undefined,
        name: undefined,
        status: undefined
      },
      loading: false,
      statusList: [
        { value: 1, label: '已启用' },
        { value: 0, label: '已禁用' }
      ],
      listData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      title: '', // 添加人员弹窗title
      visible: false
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    dayjs,
    // 获取列表数据
    getListData() {
      const params = {
        username: this.searchForm.name,
        phone: this.searchForm.phone,
        startTime: this.searchForm.date[0],
        endTime: this.searchForm.date[1],
        enabled: this.searchForm.status,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current
      }
      this.loading = true
      queryRecycleList(params)
        .then(res => {
          this.loading = false
          if (res.status === 200) {
            this.listData = res.data.list
            this.pagination.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.loading = false
          this.$message.error('获取列表数据失败')
        })
    },
    // 搜索
    handleSearch() {
      this.getListData()
    },
    // 重置
    handleReset() {
      this.searchForm.date = [undefined, undefined]
      this.searchForm.phone = undefined
      this.searchForm.name = undefined
      this.searchForm.status = undefined
      this.pagination.current = 1
      this.pagination.pageSize = 10
      this.pagination.total = 0
      this.getListData()
    },
    // 创建账号
    handleCreate() {
      this.title = '添加回收员'
      this.visible = true
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/account/list',
        query: {
          id: row.id
        }
      })
      this.title = '编辑回收员'
      this.visible = true
    },
    // 禁用
    handleDisabled(row) {
      disableedAccount({ id: row.id })
        .then(res => {
          this.$message.success('账号已禁用')
          this.getListData()
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },
    // 启用
    handleEnabled(row) {
      enabledAccount({ id: row.id })
        .then(res => {
          this.$message.success('账号已启用')
          this.getListData()
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },
    // 删除
    handleConfirmDelete(row) {
      //   this.$message.success('删除成功')
      deleteRecycle({ id: row.id })
        .then(res => {
          this.$message.success('删除成功')
          this.getListData()
        })
        .catch(() => {
          this.$message.error('删除失败')
        })
    },
    // 关闭创建
    handleCloseCreate() {
      this.title = ''
      this.visible = false
      this.$router.push('/account/list')
    },
    // 确认创建
    handleConfirmCreate() {
      this.handleCloseCreate()
      this.getListData()
    },
    // 改变页面数量
    handleSizeChange(pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.getListData()
    },
    // 切换页面
    handleCurrentChange(current) {
      this.pagination.current = current
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.account-list {
  .header-row {
    padding-bottom: 30px;
  }
  .pagination {
    text-align: right;
    padding-top: 10px;
  }
}
</style>
